<!-- NPM: Author: Johan Sundström -- http://ecmanaut.blogspot.com/ 
          Origin: http://sites.google.com/site/exhibitecmanaut/installed-fonts.html  -->
<html>
<head>
  <meta name="Content-Type" content="text/html; charset=UTF-8" />
  <title>Installed Fonts</title>
  <link rel="exhibit/data" type="application/jsonp"
        href="font-names.exhibit.jsonp"
        ex:jsonp-callback="editgridCallback" ex:converter="fontConverter" />

  <!-- script src="http://svn.devjavu.com/ecmanaut/trunk/tools/exhibit/logo-selector.js"></script -->
  <script type="text/javascript">
/**
 * Actual function that does all the work. Returns an object with the info.
 * The assumption is that most browsers will have arial set as their default
 * sans-serif font.
 */
function Detector() {
  var h = document.getElementsByTagName("body")[0];
  var d = document.createElement("div");
  var s = document.createElement("span");

  d.appendChild(s);
  d.style.fontFamily = "sans-serif";// font for the parent element DIV
  s.style.fontFamily = "sans-serif";// arial font used as a comparator
  s.style.fontSize = "24px";       // the larger the better?
  s.innerHTML = "mmmmmmmmmml";// use m for maximum width. L so that the same matching fonts can get separated
  h.appendChild(d);
  var defaultWidth = s.offsetWidth; // now we have the defaultWidth/Height
  var defaultHeight = s.offsetHeight; // -- compare other fonts with these
  h.removeChild(d);

  /* test
   * params:
   * font - name of the font you wish to detect
   * item - object that gets the width, height and installed properties set
   */
  this.test = function(font, item) {
    h.appendChild( d );
    s.style.fontFamily = font;
    item.width = s.offsetWidth;
    item.height = s.offsetHeight;
    h.removeChild(d);

    font = font.toLowerCase();
    item.installed = true; // to set arial and sans-serif true
    if (font != "arial" && font != "sans-serif") {
      item.installed = item.width != defaultWidth ||
		      item.height != defaultHeight;
    }
    return item;
  };
}

function test( form ) {
  var font = form.elements.namedItem('font').value;
  var item = { type:"Font", kind:"named", label:font };
  database.loadData( { items:[ (new Detector()).test( font, item ) ] },
		     Exhibit.Persistence.getBaseURL( location.href ) );
}

function rowStyler( label, obj, tr, n ) {
  var tds = tr.getElementsByTagName("td");
  tr.style.fontFamily = label;
  tr.style.fontSize = "24px";
}

function fontConverter( json ) {
  var items = json.items;
  for( var i = 0, item; item = items[i]; i++ )
    item = (new Detector()).test( item.label, item );

  var props = { width:{ valueType:"number", label:"Width" },
               height:{ valueType:"number", label:"Height" },
	    installed:{ valueType:"boolean", label:"Installed" } };
  var types = { Font: { pluralLabel:"Fonts" } };
  return { items:items, properties:props, types:types };
}

function load( url ) {
  var script = '<script type="text/javascript" src="'+ url +'"></scr'+'ipt>\n';
  document.write( script );
}

function css( url ) {
  var link = '<link rel="stylesheet" href="'+ url +'" type="text/css" />\n';
  document.write( link );
}

/* //NPM
if( location.protocol != "file:" ) {
  css( "http://simile.mit.edu/exhibit/examples/presidents/styles.css" );
  load( "http://simile.mit.edu/repository/exhibit/branches/2.0/src/webapp/api/exhibit-api.js?views=timeline&bundle=false" );
} else {
*/ //NPM
  css( "../../api/styles/common.css" );
  css( "styles.css" ); //NPM: was "../presidents/styles.css" but use own copy
  load( "../../api/exhibit-api.js" );
  load( "../../api/extensions/time/time-extension.js" );
/* //NPM
}
*/ //NPM
</script><noscript>
  <link rel="stylesheet" href="http://simile.mit.edu/exhibit/examples/presidents/styles.css" type="text/css" />
</noscript>
  <style type="text/css">
@media print {
  #content { background:none; width:100%; }
  .printer { display:inline !important; }
  .screen, #sidebar {
    display:none;
  }
}

.printer { display:none; }

div.exhibit-facet-header {
  background:none;
}

div.exhibit-facet-body {
  height:auto;
}

.Installed div.exhibit-facet-body,
.Type div.exhibit-facet-body {
  height:3em;
}

.Height div.exhibit-facet-body {
  height:7.5em;
}

.tile {
  font-size:24px;
  width:180px;
  height:65px;
  text-align:center;
}

#sidebar {
  width:18%;
  background:#F8F4EF;
}

h3 {
  white-space:nowrap;
}
  </style>
</head>
<body _ex:ondataload="setTimeout(exhibitLogoSelector,5e3)">
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 checked="true" class="flickable-checkbox"><span  onclick="(function() { var chk = SimileAjax.jQuery('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>Installed Fonts</large></li>
    </ul>

  <div ex:role="exhibit-collection" ex:itemTypes="Font"></div>

  <table id="frame">
    <tr>
      <td id="content">
<!--    <h1>Installed Fonts</h1>
        <p>This page is another visualization of Lalit Patel's
          <a href="http://www.lalit.org/lab/fontdetect.php">CSS/Javascript
	  font detector</a>. It tests the length of the string
	  <i>mmmmmmmmmml</i> at 24px, and measures the width and
	  height of the rendered versions, comparing those against the
	  width of the default font. Go ahead and probe for other
	  fonts, and play around with the filter facets and views!
	</p>
-->
        <form onsubmit="test(this);return false;">
          <label for="font">Font name:
            <input id="font" type="text" style="width:60%;" />
          </label>
          <input type="button" onclick="test(this.form);" value="Test" />
          <!--input type="button" onclick="exhibitLogoSelector()" value="Logo" /-->
        </form>

        <div ex:role="exhibit-viewPanel">

          <div ex:role="exhibit-view"
            ex:label="Fonts"
            ex:viewClass="Exhibit.ThumbnailView"
            ex:showAll="true"
            ex:orders=".kind, .label"
            ex:grouped="true"
            ex:possibleOrders=".kind, .label, .width, .height, .installed">
            <div ex:role="exhibit-lens" class="tile" style="display:none">
              <span ex:style-subcontent="font-family:{{.label}}; width:{{.width}}px;"
		    ex:content=".label"></span>
            </div>
          </div>

          <div ex:role="exhibit-view"
            ex:label="Table"
            ex:viewClass="Exhibit.TabularView"
            ex:columns=".label, .installed, .width, .height"
            ex:columnLabels="Name, Installed, Width, Height"
            ex:columnFormats="list, list, list, list"
            ex:sortColumn="0"
            ex:sortAscending="true"
            ex:rowStyler="rowStyler"
            ></div>

          <div ex:role="exhibit-lens" ex:itemTypes="Fika"
               class="tile" style="display:none">
            <h3>
              v<span ex:content=".vecka"></span>,
              <span ex:content=".datum"></span>
            </h3>
            <p>Fikamakare:
              <ul class="fikamakare" ex:content="fikamakare">
                <li>
                  <img ex:title-content=".label" ex:src=".url" />
                </li>
              </ol>
            </p>
          </div>

        </div>
      </td>
      <td id="sidebar">
        <div id="exhibit-browse-panel" ex:facets=".installed">
          <div ex:role="exhibit-facet" ex:expression=".installed" ex:facetLabel="Installed"></div>
	  <div ex:role="exhibit-facet" ex:expression=".kind" ex:facetLabel="Type"></div>
	  <div ex:role="exhibit-facet" ex:expression=".height" ex:facetLabel="Height" ex:facetClass="Exhibit.NumericRangeFacet" ex:interval="5"></div>
	  <div ex:role="exhibit-facet" ex:expression=".width" ex:facetLabel="Width" ex:facetClass="Exhibit.NumericRangeFacet" ex:interval="10"></div>
          <center ex:role="exhibit-logo" ex:color="DarkSalmon"></center>
	</div>
      </td>
    </tr>
  </table>

<!-- //NPM
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-120853-7"; if( "urchinTracker" in window ) urchinTracker();</script>
-->  //NPM
</body>
</html>
